<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="margin: 0 500px;width: 22%">
    <el-table-column
      prop="roleName"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button  @click="handleClick(scope.row)" style="color:green;width:45px" type="text" size="small">查看</el-button>
        <el-button @click="handleDelete(scope.row)" type="text" size="small"  style="color:red;width:30px">删除</el-button>
        <el-button @click="handleUpdate(scope.row)" type="text" size="small" style="width:30px">权限分配</el-button>
         </template>
    </el-table-column>
  </el-table>

  <Pager 
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleNewPage"
  ></Pager>
    <div>
    <el-input v-model="input" placeholder="请根据名称输入查询内容" style="width:20%;margin-left:500px"></el-input>
     <el-button @click="queryRole" type="success" style="margin-left:5px">查询</el-button>
    </div>
    <div>
       <el-popover
          ref="popover4"
          placement="right"
          width="400"
          trigger="click">

          <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="域名" prop="thronePath">
              <el-input  v-model.number="ruleForm.roleName"></el-input>
            </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
              </el-form-item>
          </el-form>
          <el-button slot="reference" style="color:green;margin-left:500px" >添加角色</el-button>
      </el-popover>
 
    </div>
  </div>
</template>

<script>
import Pager from '../components/Pager'
import {getRoleList} from '../services/RoleService.js'
import {addRole} from '../services/RoleService.js'
import {queryRoles} from '../services/RoleService.js'
import {deleteRoleById} from '../services/RoleService.js'
export default {
  components:{
    Pager,
  },
    async created(){
        var resp = await getRoleList(this.page,this.limit);
        this.tableData = resp.list;
        this.total = resp.total;
    },
     methods: {
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addRole(this.ruleForm).then((resp) => {
              if(resp.data == "true"){
                //刷新界面
                this.handleNewPage(this.page).then(() => {
                  this.ruleForm.roleName = "";
                  this.$refs.popover4.showPopper = false;
                });
              }else{
                alert("服务器正忙，添加失败");
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
       async queryRole(){
          this.$router.push({
            query: {
            page: 1,
          },
          }); 
          var resp = await queryRoles(this.page,this.limit,this.input);
          this.tableData = resp.data.list;
          this.total = resp.data.total;
       }
       ,
      handleClick(row) {
        this.$router.push({
          name:"CheckRole",
          params:row
        });
      },
      handleUpdate(row){
        this.$router.push({name:'ThroneDistribution'
        ,params:row});
      },
      handleDelete(row) {
        this.$confirm("你确定要删除该角色的信息吗？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then((resp)=>{
          if(resp == "confirm"){
            deleteRoleById(row.roleId).then((res) =>{
              if(res.data == "true"){
                //刷新页面
                this.handleNewPage(this.page).then((re) => {

                });
                // this.reload();
                alert("删除成功");
              }else {
                alert("删除失败,服务器正忙");
              }
          })
          }
         
        }).catch(err => err)
      },
      async handleNewPage(newPage) {

      this.$router.push({
        query: {
          page: newPage,
        },
      }); 

      var resp = await getRoleList(this.page,this.limit);
      this.tableData = resp.list;
      this.total = resp.total;
    }
    },
    data() {
      return {
      tableData: [],
      limit: 5,
      total: 0,
      panelNumber: 10,
      input:'',
      ruleForm:{
        roleName:'',
      }
      }
    },
    computed:{
      page(){
        return +this.$route.query.page || 1;
      }
    }
}
</script>

<style>

</style>